<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件  -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
        </script>
    <link rel="stylesheet" href="vadio.css">
</head>

<body>
        <video id="video">
        <source
            src='https://vd3.bdstatic.com/mda-nbr4exhm2e41mskm/sc/cae_h264_delogo/1645845305002345474/mda-nbr4exhm2e41mskm.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1645868724-0-0-1011b1788f9678b54b3e5d17ddf5a7b5&bcevod_channel=searchbox_feed&cd=0&pd=1&pt=3&logid=0924848115&vid=10850129371509846071&abtest=100815_1-3000220_4&klogid=0924848115'
            id='myvideo' type="video/mp4">
        </source>
    </video>
    <div class="icon">
        <span class="glyphicon glyphicon-step-backward"></span>
        <span class="glyphicon glyphicon-play"></span>
        <span class="glyphicon glyphicon-step-forward"></span>
        <span class="glyphicon glyphicon-volume-up"></span>
        <span class="glyphicon glyphicon-repeat"></span>
        <span class="glyphicon glyphicon-fullscreen"></span>
    </div>
    </div>
    
</body>
<script>
    var videos = [
        'https://vd2.bdstatic.com/mda-mm1upsirnfnfk4wb/720p/h264/1638476141846477566/mda-mm1upsirnfnfk4wb.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1645872062-0-0-4726f321945dc1aee2b6711a2107dc90&bcevod_channel=searchbox_feed&cd=0&pd=1&pt=3&logid=0662751046&vid=16655916648485725886&abtest=100815_1-3000220_4&klogid=0662751046',
        'https://vd3.bdstatic.com/mda-nbr4exhm2e41mskm/sc/cae_h264_delogo/1645845305002345474/mda-nbr4exhm2e41mskm.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1645868724-0-0-1011b1788f9678b54b3e5d17ddf5a7b5&bcevod_channel=searchbox_feed&cd=0&pd=1&pt=3&logid=0924848115&vid=10850129371509846071&abtest=100815_1-3000220_4&klogid=0924848115',
        'https://vd3.bdstatic.com/mda-mm9psw45vgyn9q4r/sc/cae_h264/1639339991635926100/mda-mm9psw45vgyn9q4r.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1645872086-0-0-edcc552e419767b4e0d17128656313fc&bcevod_channel=searchbox_feed&cd=0&pd=1&pt=3&logid=0686334836&vid=18269300826908244094&abtest=100815_1-3000220_4&klogid=0686334836'
    ]
    var currentIndex = 1
    var myVideo = document.getElementById('video')
    $(function () {
        $('span:eq(0)').click(function () {
            // console.log($('#myvideo').src)
            var a = document.getElementById("myvideo")
            console.log(a.src)
            currentIndex <= 0 ? currentIndex = videos.length - 1 : currentIndex--
            a.src = videos[currentIndex]
            myVideo.load()
            $('span:eq(1)').prop('class','glyphicon glyphicon-play')
        })
        $('span:eq(1)').click(function () {
            if (this.className == 'glyphicon glyphicon-play') {
                this.className = 'glyphicon glyphicon-pause'
                myVideo.play()
            } else {
                this.className = 'glyphicon glyphicon-play'
                myVideo.pause()
            }

        })
        $('span:eq(2)').click(function () {
            // console.log($('#myvideo').src)
            var a = document.getElementById("myvideo")
            console.log(a.src)
            currentIndex >= videos.length - 1 ? currentIndex = 0 : currentIndex++
            a.src = videos[currentIndex]
            myVideo.load()
            $('span:eq(1)').prop('class','glyphicon glyphicon-play')
        })
        $('span:eq(3)').click(function () {
            if (this.className == 'glyphicon glyphicon-volume-off') {
                this.className = 'glyphicon glyphicon-volume-up'
                myVideo.muted = false
            } else {
                this.className = 'glyphicon glyphicon-volume-off'
                myVideo.muted = true
            }
        })
        $('span:eq(4)').click(function () {
            myVideo.load()
            $('span:eq(1)').prop('class','glyphicon glyphicon-play')
        })
        $('span:eq(5)').click(function () {
            myVideo.webkitRequestFullScreen()
        })
    })
    document.body.onkeydown = function () {
        if (event.keyCode == 32) {
            if (myVideo.paused) {
                myVideo.play()
                $('span:eq(1)').prop('class','glyphicon glyphicon-pause')
            } else {
                myVideo.pause()
                $('span:eq(1)').prop('class','glyphicon glyphicon-play')
            }
        }
    }

</script>

</html>